<template>
  <div id="login">
    <div v-if="isPC" id="pc" class="index-wrapper">
      <img
        src="@/assets/image/bg.jpg"
        alt=""
        width="100%"
        height="100%"
        class="bg"
      />
      <div class="header">
        <img src="@/assets/image/logo.png" alt="" style="height: 2rem" />
        <span>企业登录入口</span>
      </div>
      <div class="content">
        <div class="content-box">
          <h1>
            欢迎登录
          </h1>
          <!--        18180754126-->
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                size="large"
                placeholder="请输入登录手机号"
                v-decorator="[
                  'mobile',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入账号'
                      }
                    ]
                  }
                ]"
                style="width: 100%"
              >
                <a-icon slot="addonBefore" type="user" class="icon-style" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                size="large"
                placeholder="请输入密码"
                autocomplete="off"
                v-decorator="[
                  'password',
                  {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '请输入密码'
                      }
                    ]
                  }
                ]"
                :type="eyesType"
              >
                <a-icon slot="addonBefore" type="lock" class="icon-style" />
                <a-icon slot="suffix" :type="eye" @click="changeType" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="8">
                <a-col :span="14">
                  <a-input
                    size="large"
                    placeholder="图片验证码"
                    autocomplete="off"
                    v-decorator="[
                      'code',
                      {
                        initialValue: '',
                        rules: [
                          {
                            required: true,
                            message: '请输入验证码'
                          }
                        ]
                      }
                    ]"
                  >
                    <a-icon
                      slot="addonBefore"
                      type="safety"
                      class="icon-style"
                    />
                  </a-input>
                </a-col>
                <a-col :span="10" ref="wrapper">
                  <img
                    style="width:100%; height: 42px;border: 1px solid #FEB97F;border-radius: 1rem "
                    :src="code"
                    alt=""
                    @click="getImgCode()"
                  />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item>
              <a-checkbox
                size="large"
                style="font-size: 0.88rem; line-height: 1.3rem"
                v-decorator="[
                  'agreement',
                  { initialValue: true, valuePropName: 'checked' }
                ]"
              >
                我已同意
                <a
                  href="javaScript:(0)"
                  @click="agreement('user', '用户注册服务协议')"
                >
                  《用户注册服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('service', '投资人服务协议')"
                >
                  《投资人服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('tzfx', '投资风险提示书')"
                >
                  《投资风险提示书》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('dzxy', '电子签名授权协议')"
                >
                  《电子签名授权协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('wtkj', '委托快捷签署协议')"
                >
                  《委托快捷签署协议》
                </a>
              </a-checkbox>
            </a-form-item>
            <a-form-item style="text-align: center">
              <a-button type="primary" html-type="submit" class="submit-btn">
                登录 </a-button
              ><br />
              <span class="text-orange">如需帮助，请联系：400-605-9006</span>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="footer">
        <span
          >ICP备案：蜀ICP备18009152号-1 本站由 四川融诚金融服务外包有限公司
          提供计算与安全服务</span
        >
      </div>
      <a-modal
        width="80%"
        height="80%"
        :title="title"
        :visible="visible"
        onOk="handleOk"
        @cancel="handleOk"
      >
        <agreement :type="type"></agreement>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="handleOk">
            关闭
          </a-button>
        </template>
      </a-modal>
    </div>
    <div v-else id="mobile" class="index-wrapper">
      <img src="@/assets/image/bg.jpg" alt="" class="bg" />
      <div class="header">
        <img src="@/assets/image/logo.png" alt="" style="height: 2rem" />
        <span>企业登录入口</span>
      </div>
      <div class="content">
        <div class="content-box">
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                size="large"
                placeholder="请输入登录手机号"
                v-decorator="[
                  'mobile',
                  {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '请输入账号'
                      }
                    ]
                  }
                ]"
                style="width: 100%"
              >
                <a-icon slot="addonBefore" type="user" class="icon-style" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                size="large"
                placeholder="请输入密码"
                autocomplete="off"
                v-decorator="[
                  'password',
                  {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '请输入密码'
                      }
                    ]
                  }
                ]"
                :type="eyesType"
              >
                <a-icon slot="addonBefore" type="lock" class="icon-style" />
                <a-icon slot="suffix" :type="eye" @click="changeType" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="8">
                <a-col :span="14">
                  <a-input
                    size="large"
                    placeholder="图片验证码"
                    autocomplete="off"
                    v-decorator="[
                      'code',
                      {
                        initialValue: '',
                        rules: [
                          {
                            required: true,
                            message: '请输入验证码'
                          }
                        ]
                      }
                    ]"
                  >
                    <a-icon
                      slot="addonBefore"
                      type="safety"
                      class="icon-style"
                    />
                  </a-input>
                </a-col>
                <a-col :span="10">
                  <img
                    style="width:100%; height: 42px;border: 1px solid #FEB97F;border-radius: 1rem "
                    :src="code"
                    alt=""
                    @click="getImgCode()"
                  />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item>
              <a-checkbox
                size="large"
                style="font-size: 0.9rem; line-height: 1.4rem"
                v-decorator="[
                  'agreement',
                  { initialValue: true, valuePropName: 'checked' }
                ]"
              >
                我已同意
                <a
                  href="javaScript:(0)"
                  @click="agreement('user', '用户注册服务协议')"
                >
                  《用户注册服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('service', '投资人服务协议')"
                >
                  《投资人服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('tzfx', '投资风险提示书')"
                >
                  《投资风险提示书》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('dzxy', '电子签名授权协议')"
                >
                  《电子签名授权协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('wtkj', '委托快捷签署协议')"
                >
                  《委托快捷签署协议》
                </a>
              </a-checkbox>
            </a-form-item>
            <a-form-item style="text-align: center">
              <a-button
                type="primary"
                html-type="submit"
                style="padding: 0rem 3rem;height: 2.44rem;border-radius:1rem;"
              >
                登录 </a-button
              ><br />
              <span class="text-orange">如需帮助，请联系：400-605-9006</span
              ><br />
              <span class="text-orange">手机浏览器推荐：谷歌浏览器</span>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="footer">
        <span
          >ICP备案：蜀ICP备18009152号-1 本站由 四川融诚金融服务外包有限公司
          提供计算与安全服务</span
        >
      </div>
      <a-modal
        width="80%"
        height="80%"
        :title="title"
        :visible="visible"
        onOk="handleOk"
        @cancel="handleOk"
      >
        <agreement :type="type"></agreement>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="handleOk">
            关闭
          </a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { Checkbox, Row, Col } from "ant-design-vue";
export default {
  components: {
    aCheckbox: Checkbox,
    aRow: Row,
    aCol: Col,
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    return {
      visible: false,
      confirmDirty: false,
      type: "",
      title: "",
      eyesType: "password",
      eye: "eye-invisible",
      code: ""
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$commonJs.login(values);
        }
      });
    },
    changeType() {
      this.eyesType = this.eyesType === "password" ? "text" : "password";
      this.eye = this.eye === "eye" ? "eye-invisible" : "eye";
    },
    getImgCode() {
      this.$ajax
        .post(this.$api.getImgCode, {
          type: "code"
        })
        .then(res => {
          this.code = res.code;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getImgCode();
  },
  computed: {
    isPC() {
      return this.$store.state.isPC;
    }
  }
};
</script>

<style scoped lang="less">
.index-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .flex_content();
  .flex_column();
  .bg {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
  }
  .header {
    position: relative;
    z-index: 10;
    span {
      &:before {
        content: "|";
        display: inline-block;
      }
      font-size: 1.74rem;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
      line-height: 2rem;
    }
  }
  .footer {
    text-align: center;
    position: relative;
    z-index: 10;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(179, 179, 179, 1);
    margin-bottom: 5rem;
  }
  .content {
    position: relative;
    z-index: 10;
    .flex_content();
    h1 {
      text-align: center;
      font-size: 1.74rem;
      font-family: MicrosoftYaHei;
    }
    .icon-style {
      font-size: 1.38rem;
      color: @primary-color;
    }
  }
}
#pc.index-wrapper {
  .header {
    padding-left: 10rem;
    margin-top: 5rem;
    img {
      vertical-align: top;
    }
    span {
      &:before {
        padding: 0 2rem;
      }
    }
  }
  .footer {
    font-size: 1.13rem;
    font-family: MicrosoftYaHei;
  }
  .content {
    padding-left: 10rem;
    flex: 1;
    overflow: auto;
    .flex_align_center();
    .content-box {
      padding: 0 9rem;
      border-radius: 1rem;
      box-shadow: 7px 7px 18px rgba(254, 226, 212, 1);
      background: @white;
      .ant-form {
        width: 20.5rem;
      }
    }
    h1 {
      font-weight: 400;
      letter-spacing: 0.3rem;
      color: @primary-color;
      line-height: 6.94rem;
    }
  }
}
#mobile.index-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2.8rem;
  background: @white;
  .bg {
    height: inherit;
  }
  .header {
    text-align: center;
    line-height: 6rem;
    margin-top: 1rem;
    img {
      vertical-align: text-bottom;
    }
    span {
      &:before {
        padding: 0 1rem;
      }
    }
  }
  .footer {
    font-size: 0.88rem;
  }
  .content {
    h1 {
      margin-bottom: 40px;
      color: #333;
      line-height: 1.5;
      vertical-align: top;
      margin-left: 10px;
    }
    .text-orange {
      font-size: 0.88rem;
      font-family: MicrosoftYaHei;
      line-height: 1rem;
    }
  }
}
</style>
